:root{
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #1d4ed8; /* Deep Tech Blue */
  --accent: #3b82f6; /* Bright Blue */
  --border: #e2e8f0;
  --radius: 14px;
  --shadow: 0 12px 28px rgba(17,24,39,.08);
  --ring: 0 0 0 3px rgba(29,78,216,.20);
  --primary-soft-12: rgba(29,78,216,.12);
  --primary-soft-20: rgba(29,78,216,.20);
  /* 新增变量 */
  --primary-soft-5: rgba(29,78,216,.05);
  --primary-soft-30: rgba(29,78,216,.30);
  --glow: 0 0 20px rgba(29,78,216,.12);
  --shine: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  /* 线条感相关变量 */
  --line-color: rgba(29,78,216,.15);
  --line-thick: 2px;
  --line-thin: 1px;
  --line-dashed: 2px dashed var(--line-color);
  --divider-color: rgba(29,78,216,.10);
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0f172a;
    --surface: #1e293b;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --primary: #60a5fa; /* Tech Blue (dark for contrast) */
    --accent: #93c5fd;
    --border: #334155;
    --shadow: 0 12px 28px rgba(0,0,0,.28);
    --ring: 0 0 0 3px rgba(96,165,250,.25);
    --primary-soft-5: rgba(96,165,250,.08);
    --primary-soft-12: rgba(96,165,250,.18);
    --primary-soft-20: rgba(96,165,250,.28);
    --primary-soft-30: rgba(96,165,250,.35);
    --glow: 0 0 20px rgba(96,165,250,.15);
    --shine: linear-gradient(120deg, transparent, rgba(255,255,255,0.12), transparent);
    /* 线条感相关变量 - 暗色模式 */
    --line-color: rgba(96,165,250,.25);
    --line-dashed: 2px dashed rgba(96,165,250,.20);
    --divider-color: rgba(96,165,250,.15);
  }
  /* 暗色模式线条增强 */
  .container::before,
  .grid::after,
  .header,
  .contact,
  .project-tech,
  .item:last-child{
    opacity: 0.8;
  }
  
  body{
    background: 
      linear-gradient(135deg, var(--primary-soft-5) 25%, transparent 25%) -20px 0/40px 40px,
      linear-gradient(225deg, var(--primary-soft-5) 25%, transparent 25%) -20px 0/40px 40px,
      linear-gradient(315deg, var(--primary-soft-5) 25%, transparent 25%) 0 0/40px 40px,
      linear-gradient(45deg, var(--primary-soft-5) 25%, var(--bg) 25%) 0 0/40px 40px;
  }
  
  .header{
    background: linear-gradient(135deg, rgba(96,165,250,.18) 0%, rgba(96,165,250,.08) 45%, transparent 100%);
  }
  
  .contact a{
    background: linear-gradient(180deg, rgba(30,41,59,0.8), transparent);
  }
  
  .contact a::after{
    background: linear-gradient(90deg, transparent, rgba(96,165,250,.1), transparent);
  }
  
  .card{
    background: 
      linear-gradient(145deg, var(--surface), rgba(15,23,42,0.92)),
      var(--surface);
  }
  
  .tags li{
    background: 
      linear-gradient(145deg, rgba(96,165,250,.15), rgba(96,165,250,.08)),
      rgba(96,165,250,.12);
    color: var(--primary);
  }
  
  .tags li:hover{
    background: rgba(96,165,250,.2);
    border-color: rgba(96,165,250,.45);
    box-shadow: 0 4px 12px rgba(96,165,250,.2);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: 
    linear-gradient(135deg, var(--primary-soft-5) 25%, transparent 25%) -20px 0/40px 40px,
    linear-gradient(225deg, var(--primary-soft-5) 25%, transparent 25%) -20px 0/40px 40px,
    linear-gradient(315deg, var(--primary-soft-5) 25%, transparent 25%) 0 0/40px 40px,
    linear-gradient(45deg, var(--primary-soft-5) 25%, var(--bg) 25%) 0 0/40px 40px;
  color: var(--text);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.container{max-width:1080px;margin:0 auto;padding:0 22px;position: relative;}
.container::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--line-thin);
  height: 100%;
  background: var(--line-color);
  opacity: 0.2;
  transform: translateX(-50%);
  z-index: -1;
}

/* Header */
.header{
  padding:40px 0 60px;
  border-bottom:var(--line-dashed);
  background: linear-gradient(135deg, rgba(29,78,216,.12) 0%, rgba(29,78,216,.05) 45%, transparent 100%);
  position: relative;
  overflow: hidden;
}
@keyframes shine{
  0% { transform: translateX(-100%); opacity: 0.6; }
  50% { opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}
.header .container{ text-align:center; position: relative; }
.header .container::before{
  height: 60px;
  top: auto;
  bottom: 0;
  opacity: 0.5;
}
.name{margin:0;font-size:clamp(28px,4vw,36px);font-weight:800;letter-spacing:.2px}
.role{margin-top:8px;color:var(--muted)}
.contact{margin-top:22px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center;padding:16px 0;border-top:var(--line-thin) solid var(--line-color);position: relative;z-index: 1}
.contact a{
  color:var(--text);
  text-decoration:none;
  transition:all .2s ease;
  border:1px solid var(--primary-soft-12);
  border-radius:8px;
  padding:4px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), transparent);
  position: relative;
  overflow: hidden;
  z-index: 1;
  display:flex;
  align-items:center;
  gap:8px;
}
.contact a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(29,78,216,.1), transparent);
  transition: all 0.5s ease;
  z-index: -1;
}
.contact a::before{
  content: '';
  position: absolute;
  top: 50%;
  left: -12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
.contact a:hover{color:var(--primary);border-color:var(--primary-soft-20);transform: translateY(-1px);}
.contact a:hover::after{left: 100%;}
.contact a:hover::before{
  opacity: 1;
  left: -10px;
}
.contact a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
.dot{color:var(--muted)}

/* Layout */
.grid{display:grid;grid-template-columns:1fr;gap:22px;margin:28px 0;position: relative;}
.grid::after{
  content: '';
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: var(--line-thin);
  background: linear-gradient(to bottom, transparent, var(--line-color), transparent);
  transform: translateX(-50%);
  opacity: 0.6;
  display: none;
}
@media (min-width:960px){
  .grid{grid-template-columns:1.1fr 1.4fr;gap:36px}
  .grid::after{display: block}
}
@media (min-width:960px){.grid{grid-template-columns:1.1fr 1.4fr}}

/* Card */
.card{
  background: 
    linear-gradient(145deg, var(--surface), rgba(255,255,255,0.92)),
    var(--surface);
  border:1px solid var(--primary-soft-12);
  border-radius: var(--radius);
  padding:26px;
  box-shadow: var(--shadow);
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}
.card::after{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-bottom: var(--line-thick) solid var(--line-color);
  border-right: var(--line-thick) solid var(--line-color);
  border-radius: var(--radius) 0 0 0;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.card:hover::after{
  opacity: 0.8;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s ease;
}
/* 为卡片添加交错动画延迟 */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }
.card:nth-child(7) { animation-delay: 0.7s; }
.card:nth-child(8) { animation-delay: 0.8s; }

.card:hover{
  transform: translateY(-4px) rotate(0.5deg);
  box-shadow: 
    0 20px 40px rgba(17,24,39,.12),
    var(--glow);
  border-color: var(--primary-soft-20);
}
.card:hover::before{
  opacity: 1;
  transform: translateY(0);
}
.card h2{
  margin:0 0 12px;
  font-size:clamp(18px,2.2vw,22px);
  position:relative;
  padding-bottom:8px;
  font-weight: 800;
  background: linear-gradient(to right, var(--text), var(--muted));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--text);
}
.card h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:.9;border-radius:2px}
/* 卡片内部装饰线条 */
.card > p, .card > ul, .card > .item:first-child{
  position: relative;
  z-index: 1;
}

/* Tags */
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;position: relative;}
.tags li{
  padding:8px 12px;
  border-radius:999px;
  background: 
    linear-gradient(145deg, rgba(29,78,216,.12), rgba(29,78,216,.08)),
    rgba(29,78,216,.10);
  border: 1px solid rgba(29,78,216,.25);
  color: #1d4ed8;
  font-size:13px;
  font-weight:500;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.tags li::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--primary), var(--accent));
  border-radius: 3px 0 0 3px;
}
.tags li::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--shine);
  animation: tag-shine 3s infinite linear;
  z-index: -1;
  opacity: 0;
}
@keyframes tag-shine {
  0% { transform: translateX(-100%); opacity: 0.5; }
  50% { opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}
.tags li:hover{
  transform: translateY(-2px) scale(1.05);
  background: rgba(29,78,216,.16);
  border-color: rgba(29,78,216,.45);
  box-shadow: 0 4px 12px rgba(29,78,216,.15);
}
.tags li:hover::after{
  animation-play-state: paused;
}

/* Items */
.item{margin-top:24px;position: relative;padding-left: 28px;border-left: var(--line-thin) solid var(--line-color);}
.item::before{
  content: '';
  position: absolute;
  top: 12px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-color);
  transition: all 0.3s ease;
}
.item:hover::before{
  transform: scale(1.2);
  box-shadow: 0 0 0 2px var(--primary-soft-20);
}
.item:first-child{margin-top: 0;}
.item:last-child{
  padding-bottom: 24px;
  border-bottom: var(--line-dashed);
}
.item:last-child::after{
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
/* 为item-head添加装饰线 */
.item-head::after{
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: var(--line-thin);
  background: var(--divider-color);
}
.item-head{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:8px;
  padding-bottom:4px;
  border-bottom:1px dashed var(--border);
  position: relative;
}
.item-head strong{
  position: relative;
  display: inline-block;
  transition: color 0.2s ease;
}
.item-head strong:hover{
  color: var(--primary);
}
.item-head strong::after{
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}
.item-head strong:hover::after{
  width: 100%;
}
.meta{color:var(--muted);font-size:14px}
.item-list{margin:0;padding-left:20px;list-style-type: none;}
.item-list li{margin:6px 0;position: relative;padding-left:22px;transition: transform 0.2s ease, color 0.2s ease;}
.item-list li::before{
  content: '→';
  position: absolute;
  left: 0;
  color: var(--primary);
  transition: transform 0.2s ease;
}
.item-list li:hover{
  transform: translateX(5px);
  color: var(--text);
}
.item-list li:hover::before{
  transform: scale(1.2) translateX(2px);
}

/* Links (general) */
a{color:inherit;text-decoration-thickness: 1.5px;text-underline-offset: 2px}
a:hover{text-decoration-color: var(--primary)}

/* Footer */
.footer{color:var(--muted);padding:30px 0 42px}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* Print */
@media print{
  .header{border:none;background:none}
  .card{box-shadow:none;border:1px solid #bbb}
  .grid{grid-template-columns:1fr}
}
